<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 创建XHR对象的构造函数 (重点)
        let xhr = new XMLHttpRequest();
        // 2. 初始化发起一个请求（重点）
        xhr.open('GET','http://localhost/delayServer');
        // 3. 设置请求头（重点）- (可选)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        // 4. 发送请求（重点） "key=val&key=val"
        xhr.send();

        // 设置响应体类型 - json
        // xhr.responseType = 'json';

       
        // 5. 绑定readyState改变的监听（重点）
        xhr.onreadystatechange = function(){
            // 6. 标识请求状态的只读属性（重点）
            // 7. status: 响应状态码值, 比如200, 404（重点） 
            if(xhr.readyState === 4 && xhr.status === 200){

                // 打印 statusText 响应状态说明
                // console.log('响应状态说明',xhr.statusText);


                 // 8. response: 响应体数据, 类型取决于responseType的指定（重点）
                //  xhr.response 获取响应体数据
                // 
                 console.log(xhr.response);
            }
        }
           
        // 9. 设置响应体类型（json）
        // 10. 设置超时时间（单位：毫秒） - 为了用户在发送请求后 - 让他等多久给反映
        xhr.timeout = 3100; //2秒之后没反应 - 我就不要了！
        // 11. 绑定超时监听函数
        xhr.ontimeout = function(){
            console.log("不好意思，服务器响应错误，请稍后再试");
        }

        // 12. 当请求错误时监听函数
        xhr.onerror = function(){
            console.log("网络错误，请稍后再试");
        } 
    </script>
</body>

</html>